<template>
  <div>
    <van-pull-refresh
        :loading="loading"
        :finished="finished"
        loading-text="人家在努力加载啦~"
        finished-text="人家也是有底线的呢~">
      <van-list
          v-model:loading="loading"
          :finished="finished"
          loading-text="人家在努力加载啦~"
          finished-text="人家也是有底线的呢~"
          @load="getMoreMovie">
        <van-cell v-for="item in movieList" :key="item.id">
          <el-collapse v-model="activeName" accordion>
            <el-collapse-item
                :title="item.rating + '.' + item.filmName"
                :name="item.id"
                :key="item.id">
              <div>
                <van-swipe-cell>
                  <van-cell :border="false" :title="item.qute"/>
                  <template #right>
                    <van-button square type="primary" text="收藏" @click="showShare = true"/>
                  </template>
                </van-swipe-cell>
              </div>
            </el-collapse-item>
          </el-collapse>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <van-share-sheet
        v-model:show="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onShareSelect"/>
  </div>
</template>

<script>
import getAllMovie from '../../api/getAllMovieAPI.js'
import bus from '@/utils/EventBus.js'

export default {
  data() {
    return {
      page: -1,
      size: 15,
      loading: true,
      finished: false,
      movieList: [],
      showShare: false,
      activeName: '',
      options: [
        {name: '微信', icon: 'wechat'},
        {name: '微博', icon: 'weibo'},
        {name: '复制链接', icon: 'link'},
        {name: '分享海报', icon: 'poster'},
        {name: '二维码', icon: 'qrcode'}
      ]
    }
  },
  created() {
    bus.$on('filter', val => {
      this.movieList = val
      this.finished = true
    })
    bus.$on('search', val => {
      this.movieList = val
    })
    bus.$on('back', () => {
      this.page = 0
      this.movieList = []
      this.initMovieList()
    })
    this.initMovieList()
  },
  showMoreMovie() {
  },
  methods: {
    onShareSelect() {
      this.showShare = false
      this.$message.success('分享成功')
    },
    initMovieList() {
      getAllMovie(this.page, this.size).then(res => {
        let movies = res.data.data
        if (movies.length === 0) {
          this.finished = true
        }
        this.movieList = [...this.movieList, ...movies]
        console.log(this.movieList)
        this.loading = false
      })
    },
    getMoreMovie() {
      this.page++
      this.initMovieList()
    }
  }
}
</script>

<style></style>
